<template>
  <!-- 根据用户角色（是否为管理员）渲染不同的菜单 -->
  <el-menu
    v-if="!isAdmin"
    :router="true"
    class="sidebar-menu el-menu-vertical-demo h-full overflow-auto scrollbar-hide rounded-3xl shadow-xl p-4 bg-card"
    :default-active="getRouteName()"
    @close="handleClose"
    @open="handleOpen"
  >
    <div class="flex items-center justify-center pt-4">
      <img
        src="@/assets/logo.png"
        alt="logo"
        class="sidebar-logo w-6 h-6 mr-2"
      />
      <h1 class="text-sm font-bold m-0 tracking-widest">
        学生管理系统<span
          class="text-[0.7rem] font-bold bg-green-100 text-green-600 dark:bg-green-900 dark:text-green-300 p-1 px-2 ml-2 rounded-md align-middle"
          >学生端</span
        >
      </h1>
    </div>
    <div class="px-4">
      <el-divider />
    </div>
    <el-sub-menu index="1">
      <template #title>
        <el-icon><UserFilled /></el-icon>
        <span>学生中心</span>
      </template>
      <el-menu-item index="/user-settings">用户设置</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>
        <el-icon><Management /></el-icon>
        <span>选课系统</span>
      </template>
      <el-menu-item index="/course-selection">选课</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>
        <el-icon><LocationFilled /></el-icon>
        <span>宿舍系统</span>
      </template>
      <el-menu-item index="/dormitory-management">宿舍管理</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="4">
      <template #title>
        <el-icon><Flag /></el-icon>
        <span>学校信息</span>
      </template>
      <el-menu-item index="/school-profile">学校简介</el-menu-item>
      <el-menu-item index="/school-calendar">校历</el-menu-item>
      <el-menu-item index="/school-bus-schedule">校车时间表</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="5">
      <template #title>
        <el-icon>
          <BellFilled />
        </el-icon>
        <span>学校通知</span>
      </template>
      <el-menu-item index="/school-notice">学校通知</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="6">
      <template #title>
        <el-icon><Opportunity /></el-icon>
        <span>问题咨询</span>
      </template>
      <el-menu-item index="/FAQ">常见问题</el-menu-item>
      <el-menu-item index="/online-consultation">在线咨询</el-menu-item>
    </el-sub-menu>
  </el-menu>
  <el-menu
    v-else
    :router="true"
    class="sidebar-menu el-menu-vertical-demo h-full overflow-auto scrollbar-hide rounded-3xl shadow-xl p-4 bg-card"
    :default-active="getRouteName()"
    @close="handleClose"
    @open="handleOpen"
  >
    <div class="flex items-center justify-center pt-4">
      <img
        src="@/assets/logo.png"
        alt="logo"
        class="sidebar-logo w-6 h-6 mr-2"
      />
      <h1 class="text-sm font-bold m-0 tracking-widest">
        学生管理系统<span
          class="text-[0.7rem] font-bold bg-purple-100 text-purple-600 dark:bg-purple-900 dark:text-purple-300 p-1 px-2 ml-2 rounded-md align-middle"
          >教师端</span
        >
      </h1>
    </div>
    <div class="px-4">
      <el-divider />
    </div>
    <el-menu-item index="home">
      <template #title>
        <el-icon>
          <HomeFilled />
        </el-icon>
        <span>首页</span>
      </template>
    </el-menu-item>
    <el-menu-item index="course">
      <template #title>
        <el-icon>
          <Menu />
        </el-icon>
        <span>课程管理</span>
      </template>
    </el-menu-item>
    <el-menu-item index="dormitory">
      <template #title>
        <el-icon>
          <Histogram />
        </el-icon>
        <span>宿舍管理</span>
      </template>
    </el-menu-item>
    <el-menu-item index="student_manage">
      <template #title>
        <el-icon>
          <Stamp />
        </el-icon>
        <span>学生管理</span>
      </template>
    </el-menu-item>
    <el-menu-item index="publish_notice">
      <template #title>
        <el-icon>
          <Comment />
        </el-icon>
        <span>发布通知</span>
      </template>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
// 导入Element Plus的图标组件
import {
  UserFilled,
  Management,
  LocationFilled,
  Flag,
  BellFilled,
  Opportunity,
} from "@element-plus/icons-vue";
import {
  HomeFilled,
  Menu,
  Histogram,
  Stamp,
  Comment,
} from "@element-plus/icons-vue";
// 导入Vue Router的useRoute钩子
import { useRoute } from "vue-router";

// 从localStorage获取用户角色，并判断是否为管理员
const userRole = localStorage.getItem("userRole");
const isAdmin = userRole === "administrator";
// 菜单展开和收起的事件处理函数（目前未实现具体逻辑）
const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
};
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
};
// 使用Vue Router的useRoute钩子获取当前路由对象
const route = useRoute();
// 获取当前路由名称，用于设置菜单的默认激活项
const getRouteName = () => {
  // 使用route.path获取当前路由路径，并根据路径设置激活的菜单项
  if (route.path) {
    const segments = route.path.split('/').filter(segment => segment !== '');
    return segments.length > 0 ? `/${segments[0]}` : '/';
  } else {
    return "";
  }
};
</script>
<style>
/* 暗黑模式下，对logo应用亮度和对比度的CSS滤镜 */
html.dark .sidebar-logo {
  filter: brightness(0) invert(1);
}
</style>
<style lang="scss">
/* 定义侧边栏菜单的SCSS样式 */
.sidebar-menu {
  /* 定制化Element UI的菜单项样式 */
  .el-menu-item {
    --el-menu-item-height: 3.2rem;
    --el-menu-item-font-size: 0.85rem;
    --el-menu-base-level-padding: 0rem;
    --el-menu-level-padding: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--el-text-color-primary) !important;
    letter-spacing: 0.1rem;
    font-weight: 600;
    border-radius: 0.5rem;
  }
  .el-menu-item [class^="el-icon"] {
    --el-menu-icon-width: 1.2rem !important;
    font-size: 1.2rem !important;
  }
  .el-divider--horizontal {
    margin: 2rem 0 !important;
  }
  .el-sub-menu {
    .el-sub-menu__title {
      border-radius: 0.5rem;
      color: inherit !important;
      letter-spacing: 0.1rem;
      font-weight: 600;
      font-size: 0.9rem;
      .el-icon:first-child {
        color: #165dff;
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
        border-radius: 0.5rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        transition: all 0.6s;
      }
    }
    &.is-active {
      .el-sub-menu__title {
        .el-icon:first-child {
          color: #ffffff;
          background-color: #165dff;
        }
      }
    }
    .el-sub-menu__title {
      padding-left: 0 !important;
    }
    .el-menu-item {
      padding-left: 2.5rem !important;
    }
    .el-menu-item {
      font-size: 0.75rem;
      opacity: 0.8;
      &.is-active {
        position: relative;
        background-color: var(--el-menu-hover-bg-color);
        box-shadow: 0px 5px 14px 0px rgba(0, 0, 0, 0.05);
        &::after {
          content: "";
          position: absolute;
          top: 25%;
          left: 1.25rem;
          height: 50%;
          width: 0.3rem;
          background-color: #165dff;
          border-radius: 0.5rem;
          animation: slide 0.3s ease-in-out forwards;
        }
      }
    }
  }
  &.el-menu {
    > .el-menu-item {
      border-radius: 0.5rem;
      .el-icon:first-child {
        color: #165dff;
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
        border-radius: 0.5rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        transition: all 0.6s;
      }
      &.is-active {
        .el-icon:first-child {
          color: #ffffff;
          background-color: #165dff;
        }
      }
      &.is-active {
        position: relative;
        background-color: var(--el-menu-hover-bg-color);
        box-shadow: 0px 5px 14px 0px rgba(0, 0, 0, 0.05);
        &::after {
          content: "";
          position: absolute;
          top: 25%;
          left: -0.6rem;
          height: 50%;
          width: 0.3rem;
          background-color: #165dff;
          border-radius: 0.5rem;
          animation: slide 0.3s ease-in-out forwards;
        }
      }
    }
  }
}

/* 定义动画，用于菜单激活时的视觉效果 */
@keyframes slide {
  0% {
    transform: translateX(-0.6rem);
  }
  100% {
    transform: translateX(0);
  }
}
</style>
